<template>
  <div class="main">
    <div class="l">
      Login
      <input type="text" v-model="loginForm.username" placeholder="用户名" />
      <input type="text" v-model="loginForm.password" placeholder="密码" />
      <button @click="login">登录</button>
    </div>
    <div class="r">
      Register
      <input type="text" v-model="registerForm.username" placeholder="用户名" />
      <input type="text" v-model="registerForm.password" placeholder="密码" />
      <button @click="register">注册</button>
    </div>
  </div>
</template>

<script>
import { reguser, login } from "../api/user/index";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      registerForm: {
        username: "",
        password: "",
      },
      Token: "",
    };
  },
  methods: {
    login() {
      if (this.loginForm.username == "" || this.loginForm.password === "") {
        alert("账号密码不能为空");
      } else {
        login(this.loginForm.username ,this.loginForm.password ).then(res => {
          //console.log(res)
          if(res.status == 0) {
            this.Token = res.token;
            this.$store.commit("changeLogin", { Authorization: this.Token });
            this.$router.push("/home");
          }else {
            alert(res.message)
          }
        })
      }
    },
    register() {
      if (
        this.registerForm.username == "" ||
        this.registerForm.password === ""
      ) {
        alert("账号密码不能为空");
      } else {
        reguser(this.registerForm.username, this.registerForm.password).then(
          (res) => {
            if(res.data.status == 0) {
              this.registerForm.username = "";
              this.registerForm.password = "";
            }
            alert(res.data.message)
          }
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 600px;
  height: 300px;
  margin: 40px auto;
  display: flex;
  border: 1px solid rgb(79, 203, 219);
  div {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(85, 89, 90);
    input {
      width: 50%;
      margin: 10px;
    }
    button {
      width: 50%;
      margin: 10px;
    }
  }
  .l {
    background: rgb(252, 215, 215);
  }
  .r {
    background: rgb(210, 238, 255);
  }
}
</style>